<template>
  <div class="box">
    <el-container>
      <el-header
        >
        <span
          @click="changeColl"
          :class="['iconfont', 'icon-zhankai', { active: isCollapse }]"
        />
   
  <el-dropdown  class="avatar" @command="handleCommand">
    <div class="demo-type">
    <div>
      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
    </div>
  </div>

  <el-dropdown-menu slot="dropdown"  >
    <el-dropdown-item>个人中心</el-dropdown-item>
    <el-dropdown-item>消息中心</el-dropdown-item>
    <el-dropdown-item  command="2">退出</el-dropdown-item>
   
  </el-dropdown-menu>
</el-dropdown>
      </el-header>
      <el-container>
        <el-aside style="width:auto">
          <el-menu
            router
            
            :default-active="routePath"
            active-text-color="#409EFF"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
          >
            <el-menu-item
              v-for="(item, index) in Routes"
              :key="index"
              :index="item.path"
            >
              <i :class="['iconfont', item.meta.icon]"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    
  </div>
</template>

<script>
import "@assets/css/iconfont/iconfont.css";

export default {
  data() {
    return {
      isCollapse: false,
      userInfo: JSON.parse(localStorage.getItem('userInfo')),
      Routes: this.$router.options.routes[1].children.filter(
        (item) => item.meta.isNav
      ),
      routePath:""
    };
  },
  created(){
    this.Routes=this.Routes.filter(item=>{
      return item.meta.jurisdiction.includes(this.userInfo.jurisdiction)
      const path = this.$route.fullPath.split('/')
      this.routePath="/"+path[1]+'/'+path[2]
    })
  
    
  },
  mounted(){
      const path = this.$route.fullPath.split('/')
      this.routePath="/"+path[1]+'/'+path[2]
      
  },
  methods: {
    
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    changeColl() {
      this.isCollapse = !this.isCollapse;
      console.log(this);
    },
    checkout(){
      localStorage.removeItem('token')
      this.$router.go(0)
    },
   handleCommand(command) {
        switch(command){
          case "2":
              console.log(111);
            this.checkout()
           break;
        }
      }
  }
  
};
</script>

<style lang="scss" scoped>
.avatar{
  float: right;
  margin-top: 10px;
  margin-right: 50px;
}

.el-container{
  height: 100vh;
  overflow: hidden;

}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

 .el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
  width: auto;
}

 .el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.icon-zhankai {
  color: white;
  font-size: 30px;
  float: left;

 
  cursor: pointer;

}
.active {
  color: rgb(21, 25, 26);
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-vertical-demo {
  height: 100%;
  background: #d3dce6;
}

.el-menu-item {
  text-align: left;
}

.el-menu-item .iconfont {
  font-size: 20px;
  margin-right: 25px;
}
</style>